<template>
<div class="login">
   <!-- <div class="pic">
        <img :src=imgsrc>
         <svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-hanguo"></use>
         </svg>
          <svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-CHN"></use>
         </svg>
          <svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-guoqi-"></use>
         </svg>
    </div> -->
    <myheader></myheader>
  <select v-model="locale" @change="changeimg(locale)">
    <option value='简体中文'>简体中文</option>
    <option value='繁体中文'>繁体中文</option>
    <option value='English'>English</option>
  </select>
  <el-form ref="loginForm" :model="loginForm" class="main" :rules="loginRules">
    <h2>{{$t("loginMsg.title")}}</h2>
     <el-form-item prop="userName">
      <p>{{$t("loginMsg.userName")}}</p>
    <el-input v-model="loginForm.username" :placeholder="$t('loginMsg.loginUserNamePlaceHolder')"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <p>{{$t("loginMsg.password")}}</p>
    <el-input v-model="loginForm.password" type="password" :placeholder="$t('loginMsg.loginPSDPlaceHolder')"></el-input>
  </el-form-item>
   <el-form-item ><a href="#">{{$t('loginMsg.forgetControl')}}</a>
   </el-form-item>
   <el-form-item >
     <el-button type="primary" plain class="loginbtn">{{$t('loginMsg.loginbtn')}}</el-button>
   </el-form-item>
    <el-form-item >
     <a href="#"><el-button type="primary" plain class="loginbtn">{{$t('loginMsg.register')}}</el-button></a>
   </el-form-item>
   <el-form-item>
<el-input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur.native="checkLpicma" v-model="picLyanzhengma"></el-input>
  <el-input type="button" id="code" @click.native="createCode" class="verification1" v-model="checkCode"></el-input>
  <a class="user_login" @click="Login">登录</a>
   </el-form-item>

  </el-form>
  <myfooter></myfooter>
</div>
</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      locale: '简体中文',
      imgsrc: '',
      loginRules: {
        userName: [
          { required: true, message: this.$t('loginMsg.userNameBlur'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('loginMsg.passwordBlur'), trigger: 'blur' }]

      },
      checkCode: '123',
      picLyanzhengma: ''
    }
  },
  methods: {
    createCode () {
      console.log(123)
      let code = ''
      var codeLength = 4// 验证码的长度
      var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']// 随机数
      for (var i = 0; i < codeLength; i++) {
        // 循环操作
        var index = Math.floor(Math.random() * 36)// 取得随机数的索引（0~35）
        code += random[index]// 根据索引取得随机数加到code上
      }
      this.checkCode = code// 把code值赋给验证码
    },
    // 失焦验证图和密码
    checkLpicma () {
      this.picLyanzhengma.toUpperCase()// 取得输入的验证码并转化为大写
      if (this.picLyanzhengma === '') {
        // 代码是直接复制项目内容，这里选择器选择时 请根据自己的需求来实现提示语效果，很简单，我懒，就不改了 ~
        $('.login_content1 span:eq(2)').text('请输入验证码')
        $('.login_content1 span:eq(2)').removeClass('disappear')
      } else if (this.picLyanzhengma.toUpperCase() !== this.checkCode) {
        // 若输入的验证码与产生的验证码不一致时
        console.log(this.picLyanzhengma.toUpperCase())
        // 代码是直接复制项目内容，这里选择器选择时 请根据自己的需求来实现提示语效果，很简单，我懒，就不改了 ~
        $('.login_content1 span:eq(2)').text('验证码不正确')
        $('.login_content1 span:eq(2)').removeClass('disappear')
        this.createCode()// 刷新验证码
        this.picLyanzhengma = ''
      } else {
        // 输入正确时
        // 代码是直接复制项目内容，这里选择器选择时 请根据自己的需求来实现提示语效果，很简单，我懒，就不改了 ~
        $('.login_content1 span:eq(2)').addClass('disappear')
        $('.login_content1 span:eq(2)').text('请输入验证码')
        return true
      }
    },
    Login () {

    }
  },
  submitForm (formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('submit!')
      } else {
        console.log('error submit!!')
        return false
      }
    })
  },
  resetForm (formName) {
    this.$refs[formName].resetFields()
  }
}

</script>

<style lang="scss" scoped>
/*scoped是指当前页面能使用的样式*/
.login {
  .flag {
    width: 100px;
    height: 50px;
  }
  .main {
    width: 400px;
    margin: 200px auto;
    h2 {
      font-weight: normal;
    }
    .loginbtn {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
